<template>
  <el-card
    shadow="never"
    :body-style="{ padding: '24px 32px', height: '100%' }"
    class="cus-card">
    <el-row :gutter="5" style="height: 100%;">
      <el-col :span="6" style="height: 100%;">
        <div class="tree-wrapper">
          <div class="tree-container">
            <el-input
              placeholder="输入关键字进行过滤"
              prefix-icon="el-icon-search"
              size="small"
              v-model="filterText"
              class="input-search">
            </el-input>

            <el-tree
              v-loading="loadingTree"
              class="filter-tree"
              :data="data2"
              :props="{children: 'children', label: 'name'}"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              ref="tree2">
            </el-tree>

            <div class="tree-wrapper-bottom">
              <el-button
                style="width: 100%"
                size="medium"
                type="primary"
                plain
                icon="el-icon-plus"
                @click="onClickAddBtn">
                新增分类
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" style="height: 100%;">
        <div class="main-content">
          <div class="main-content-header">
            <span class="title">{{ mainContentTitle }}</span>
          </div>
          <div class="main-content-body">
            <div v-loading="loadingDetails" class="form-wrap">
              <el-form
                ref="form"
                :model="form"
                size="small"
                label-width="80px">
                <el-form-item label="分类名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="分类父级">
                  <el-cascader
                    v-model="ancestorsIds"
                    :options="data2"
                    :props="{children: 'children', value: 'id', label: 'name', checkStrictly: true}"
                    change-on-select
                    clearable
                    @change="handleChange"
                    style="width: 100%">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="分类排序">
                  <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="分类图标">
                  <image-select-list
                    v-model="cateIcon"
                    ref="imageSelectList"
                    single
                    @onChange="onImageSelectListChange">
                  </image-select-list>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-check"
                    :loading="loadingSubmit"
                    @click="onSubmit">
                    保存分类
                  </el-button>
                  <el-button
                    v-if="id"
                    type="danger"
                    icon="el-icon-delete"
                    @click="onClickDelete">
                    删除分类
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- <div class="main-content-actions">
            <el-button type="primary">保存分类</el-button>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {
  getProductCategoryList,
  createProductCategory,
  updateProductCategory,
  getProductCategoryDetails,
  deleteProductCategory
} from '@/api/productCategory'

import ImageSelectList from '@/components/ImageSelectList'

export default {
  components: {
    ImageSelectList
  },
  data() {
    return {
      id: 0,
      mainContentTitle: null,
      filterText: '',
      data2: [],
      form: {
        name: null,
        parent_id: null,
        sort: null,
        icon: null
      },
      ancestorsIds: [],
      cateIcon: [],
      loadingTree: false,
      loadingDetails: false,
      loadingSubmit: false
    };
  },
  created () {
    this.mainContentTitle = '新增分类'
    this.getProductCategory()
  },
  methods: {
    // 获取商品分类
    getProductCategory() {
      this.loadingTree = true
      getProductCategoryList().then(res => {
        this.loadingTree = false
        if (res.status === 'success') {
          this.data2 = res.data
        }
      })
    },
    // 新建商品分类
    createProductCategory() {
      createProductCategory(this.form).then(res => {
        this.loadingSubmit = false
        if (res.status === 'success') {
          this.$message({
            type: 'success',
            message: '新建成功'
          })
          this.getProductCategoryDetails(res.data)
          this.getProductCategory()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 更新商品分类
    updateProductCategory() {
      updateProductCategory(this.id, this.form).then(res => {
        this.loadingSubmit = false
        if (res.status === 'success') {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.getProductCategory()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 删除商品分类
    deleteProductCategory() {
      deleteProductCategory(this.id).then(res => {
        if (res.status === 'success') {
          this.resetForm()
          this.$message({
            type: 'success',
            message: res.message
          })
          this.getProductCategory()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 获取商品分类详情
    getProductCategoryDetails(id) {
      this.loadingDetails = true
      getProductCategoryDetails(id).then(res => {
        this.loadingDetails = false
        if (res.status === 'success') {
          this.resetForm()
          const { id, name, parent_id, sort, icon, ancestorsIds } = res.data
          this.id = id
          this.form.name = name
          this.form.parent_id = parent_id ? parent_id : null
          this.form.sort = sort
          this.form.icon = null
          if (icon) {
            this.form.icon = icon
            this.cateIcon = [icon]
          }
          this.ancestorsIds = []
          if (ancestorsIds) {
            this.ancestorsIds = ancestorsIds
          }
          this.mainContentTitle = name
        }
      })
    },
    // 提交表单
    onSubmit() {
      this.loadingSubmit = true
      if (this.id) {
        this.updateProductCategory()
      } else {
        this.createProductCategory()
      }
    },
    onImageSelectListChange(imgs) {
      if (imgs && imgs.length > 0) {
        this.form.icon = imgs[0]
      } else {
        this.form.icon = null
      }
    },
    // 点击新增按钮
    onClickAddBtn() {
      this.id = 0
      this.resetForm()
      this.mainContentTitle = '新增分类'
    },
    onClickDelete() {
      this.deleteProductCategory()
    },
    resetForm() {
      this.form.name = null
      this.form.parent_id = null
      this.form.sort = null
      this.form.icon = null
      this.cateIcon = []
    },
    // 点击树节点
    handleNodeClick(data) {
      const { id, name } = data
      this.id = id
      this.mainContentTitle = name
      this.getProductCategoryDetails(id)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleChange(value) {
      this.form.parent_id = value[value.length - 1]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
};
</script>

<style lang="scss" scoped>
.cus-card {
  height: 100%;
}

.tree-wrapper {
  position: relative;
  height: 100%;
  border-right: 1px solid #e8e8e8;
  padding-right: 15px;
  .tree-container {
    position: relative;
    height: 100%;
  }
  .input-search {
    margin-bottom: 10px;
  }
  .tree-wrapper-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
  }
}

.main-content {
  position: relative;
  height: 100%;
  padding: 0 10px;
  .main-content-header {
    font-size: 16px;
    padding: 10px 15px;
    border-bottom: 1px solid #e8e8e8;
  }
  .main-content-body {
    padding: 15px 20px;
  }
  .main-content-actions {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}

.form-wrap {
  width: 600px;
  // margin: 0 auto;
  margin-top: 20px;
}
</style>